{% load staticfiles %}
<link rel="stylesheet" href="{% static 'css/imagecrop.css' %}">
<div class="container">
    <div class="imageBox">
        <div class="thumbBox"></div>
        <div class="spinner" style="display: none"></div>
    </div>

    <div class="action">
        <!-- <input type="file" id="file" style=" width: 200px">-->
        <div class="new-contentarea tc">
            <a href="javascript:void(0)" class="upload-img">
                <label for="upload-file">请先选择图片...</label>
            </a>
            <input type="file" class="" name="upload-file" id="upload-file" />
        </div>
        <input type="button" id="btnCrop" class="Btnsty_peyton" value="OK">
        <input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+" >
        <input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-" >
    </div>
    <div class="cropped"></div>
</div>

<script src="{% static 'js/jquery-1.11.1.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/cropbox-min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/csrf.js' %}"></script>
<script type="text/javascript">
    $(window).load(function(){
        var options=
            {
                thumbBox: '.thumbBox',
                spinner:'.spinner',
                imgSrc:''
            }
        var cropper=$('.imageBox').cropbox(options);
        var img="";
        $('#upload-file').on('change',function(){
            var reader=new FileReader();
            reader.onload=function(e){
                options.imgSrc=e.target.result;
                cropper=$('.imageBox').cropbox(options);
            }
            reader.readAsDataURL(this.files[0]);
        })
        $('#btnCrop').on('click',function(){
            $.ajax({
                url:'{% url "account:my_image" %}',
                type:'POST',
                data:{"img":img},
                success:function(e){
                    if(e=="1"){
                        parent.location.reload();
                    } else{
                        alert("上传失败")
                    }
                }

            });
        })
            function getImg(){
                img=cropper.getDataURL();
                $('.cropped').html('');
                $('.cropped').append('<img src="'+img+'"align="absmiddle" style="width:180px; margin-top:4px; border-radious:180px;box-shadow:0px 0px 12px #7E7E7E;"><p>180px*180px</P>');
                $('.cropped').append('<img src="'+img+'"align="absmiddle" style="width:128px; margin-top:4px; border-radious:128px;box-shadow:0px 0px 12px #7E7E7E;"><p>128px*128px</P>');
                $('.cropped').append('<img src="'+img+'"align="absmiddle" style="width:64px; margin-top:4px; border-radious:64px;box-shadow:0px 0px 12px #7E7E7E;"><p>64px*64px</P>');
            }
            $('.imageBox').on("mouseup",function(){getImg();});
            $('#btnZoomIn').on('click',function(){cropper.zoomIn();})
            $('#btnZoomOut').on('click',function(){cropper.zoomOut();})
        })
</script>
